<script setup>

import { ref, defineProps, defineEmits } from 'vue'

const inches = ref('')

const emit = defineEmits(['submit'])

defineProps({
  label: String
})

const scanInput = (e) => {
   emit('submit', inches.value)
}

</script>

<template>

  <div class="input-container">
    <label>{{label}}</label>
      <input
        type="number"
        v-model="inches"
        @input="scanInput"
      />
      <span class="unit">inches</span>
  </div>

</template>

<style scoped>

input {
  border:none;
  outline:none;
  padding:10px;
  border-right: 1px solid #ccc;
}

.input-inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-container {
  border:1px solid #ccc;
  align-items: center;
  width:250px !important;
  margin-bottom:10px;
  position: relative;
}

label {
  position: absolute;
  left:45%;
  top:-20px;
  text-transform: uppercase;
}

.unit {
  display: flex;
  justify-content: center;
  font-weight: 700;
  position: absolute;
  right:10px;
  top:10px;
}

button {
  border:none;
  outline:none;
  padding:10px;
  background-color:black;
  color:white;
  display: flex;
  width:100%;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

</style>